<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <h1>全选问题</h1>
    <button onclick="checkall()">全选</button>
    <button onclick="uncheckall()">反选</button>
    <input type="checkbox" name="call">
    <input type="checkbox" name="call">
    <input type="checkbox" name="call">
    <input type="checkbox" name="call">
    <input type="checkbox" name="call">
    <input type="checkbox" name="call">
    <script>
        // //选择器问题
        // // 主键选择器
        // getElementById();
        // //class类选择器
        // document.getElementsByClassName
        // // 名称name选择器
        // document.getElementsByName
        // // 元素选择器
        // document.getElementsByTagName
        // // querySelector 查询选择器
        // document.querySelector
        window.onload = ()=>{
            let checkboxs = document.getElementsByName("call");

            //找到了页面当中所有的checkbox
            for(let i in checkboxs){
                //checkboxs[i]  是一个js对象  也是html元素
                checkboxs[i].onclick = function (){
                    let a = document.getElementsByName("call");
                    for(let j = 0 ;j < a.length;j++){
                        a[j].checked = this.checked;
                    }
                }
            }

        }

        function checkall(){
            let a = document.getElementsByName("call");
            for(let j = 0 ;j < a.length;j++){
                a[j].checked = true;
            }
        }

        function uncheckall(){
            let a = document.getElementsByName("call");
            for(let j = 0 ;j < a.length;j++){
                a[j].checked = !a[j].checked;
            }
        }


    </script>

    <h1>下拉的问题</h1>
    <output id="mess"></output>
    <select id="sel">
        <option value="0">-=请选择=-</option>
        <option value="1">软件一班</option>
        <option value="2">软件2班</option>
        <option value="3">软件3班</option>
        <option value="4">软件4班</option>
        <option value="6">软件6班</option>
        <option value="5">软件5班</option>
    </select>
    <input class="inputstyle" /><button class="btn1">添加</button>
    <script>

        //在js使用时，如果用 js抓到的对象，采用 （）=》 箭头函数时，函数里面的this指的是函数本身
        //而不是html里面触发的元素

        // document.getElementById("sel").onchange = () => {
        //     console.log(this ,"表是箭头函数所在的窗体");
        //     console.log(this.selectedIndex);
        //     //this   事件触发时的元素
        // }
        document.getElementById("sel").onchange = function () {
            console.log(this ,"当前事件所在的元素本身");
            console.log(this.selectedIndex,"表示当前你选中的那个option，这个option在所有的options里面是第几个");
            console.log(this.options,"全部的options");

            //this   事件触发时的元素

            let context = "您选择的是第" + this.selectedIndex + "个元素，它的是value为"+this.options[this.selectedIndex].value+";它的文本为" + this.options[this.selectedIndex].innerText;

            document.getElementById("mess").innerText = context;
        }

        // document.getElementsByClassName("btn1")  取到的是多个元素  ,我们要取到里面的某一个，所以要添加下标
        document.getElementsByClassName("btn1")[0].onclick = function (){
            let inputval = document.getElementsByClassName("inputstyle")[0].value;
            let select = document.getElementById("sel");
            let newoptions = document.createElement("option");
            newoptions.innerText = inputval;
            newoptions.value = select.options.length;
            //向select里面的全部options添加一个新的option
            select.options.add(newoptions);

            //让一个select元素的.value = 一个值，会自动的让当前这个option自动先中
            console.log(select.options.length);
            select.value =  select.options.length - 1; 
        }
    </script>
</body>
</html>